16 轮播图

发表于 | 分类于

题目1： 轮播的实现原理是怎样的？如果让你来实现，你会抽象出哪些函数(or接口)供使用？（比如 play()）

  • 实现原理,左右滚动轮播为例

    • 关于布局:
      1. 初步布局:首先父容器相对定位,设定好宽高(确定轮播框大小),设置`overflow:hidden`溢出隐藏,在父容器内部设置`img`容器绝对定位,方便确定位置(注意不要限制死容器宽高,因为如果后面加入新的图片得修改值),设置`overflow:hidden`形成BFC,防止因浮动产生高度坍塌
2.`img`父容器内部为多个包含a链接(方便跳转链接)和img的li元素,给img设置好宽高,li元素左浮,横向排成一排,左右轮播键和底部的圆点都可通过绝对定位确定位置.
    • 关于实现逻辑:
      1.通过移动img容器的位置来展现不同的图片,达到切换效果.实现方法:在img容器中,clone最后一个元素至首部,clone第一个元素至尾部,通过计算
      (imgCount+2) * imgWidth得到img容器的宽度,imgCount为初始li元素的个数.
      先确定好第一张展示图片的位置为$imgCt.css({left: -imgWidth}),当图片左右切换,img容器位置左右加减.当运动到clone首图片时,立即跳转到原来的首图片,设置css属性$imgCt.css({left: -imgWidth}).当运动到clone尾图片时,立即跳转到原来的尾图片$imgCt.css({left: -imgCount*imgWidth}),从而达到无限左右滚动效果,css属性切换在人眼看来是连贯的.
      2.另外需要在展示不同图片的时候,知道这是第几张,设置标记位,第一张标记位为0,后面累加.最后一张为imgCount-1,通过不同的标记位img容器移动对应的位置,实现跳转图片.

  • 函数接口:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    //自动循环播放
    autoPlay()
      
    //左右切换键
    playNext()  //切换至下一张
    playPre()   //切换至上一张

    //底部导航按钮切换效果
    setBullet()

题目2： 实现视频中的左右滚动无限循环轮播效果

实现方法1
实现方法2

题目3： 实现一个渐变轮播效果, 效果范例

实现代码